<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>修改动物信息</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<style>
	form {
		width: 50%;
		border-collapse: collapse;
		margin-top: 100px;
		margin-left: auto;
		margin-right: auto;
	}
	.avatar-container {
		text-align: center; /* 使头像和上传按钮居中 */
		margin-top: 50px;
	}
	.avatar {
		width: 150px; /* 设置头像的宽度 */
		height: 150px; /* 设置头像的高度 */
		border-radius: 50%; /* 设置头像为圆形 */
		margin-bottom: 20px; /* 添加一些间距 */
	}
</style>
</head>
<body>
	<div id="app">
		<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
			<div class="layui-form-item">
				<label class="layui-form-label">动物编号</label>
				<div class="layui-input-block">
					<input type="text" v-model="animal.animalId" placeholder="请输入" autocomplete="off" class="layui-input" disabled>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">动物名字</label>
				<div class="layui-input-block">
					<input type="text" v-model="animal.animalName" placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">动物图片</label>
				<div class="layui-input-block">
					<input type="text" v-model="animal.animalImg" placeholder="请输入图片URL" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">动物备注</label>
				<div class="layui-input-block">
					<textarea v-model="animal.animalRemark" placeholder="请输入内容" class="layui-textarea"></textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">动物类型</label>
				<div class="layui-input-block">
					<input type="text" v-model="animal.animalTypeId" placeholder="请输入类型ID" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">所属场馆</label>
				<div class="layui-input-block">
					<input type="text" v-model="animal.stadiumId" placeholder="请输入场馆ID" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="button" @click="doUpdate" class="layui-btn" lay-submit lay-filter="*">提交修改</button>
				</div>
			</div>
		</form>
	</div>
	
	<script src="layui/layui.js"></script>
	<script>
	layui.use('form', function(){
	  var form = layui.form;
	  
	  // 各种基于事件的操作，下面会有进一步介绍
	});
	</script>
	
	<script src="js/vue.js" type="text/javascript"></script>
	<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		let vm = new Vue({
			el: "#app",
			data: {
				animal: {
					animalId: '',
					animalName: '',
					animalImg: '',
					animalRemark: '',
					animalTypeId: '',
					stadiumId: ''
				}
			},
			created() {
				// 获取从 list.html 传递的 animalId
				const ps = new URLSearchParams(window.location.search);
				let gid = ps.get("gid");
				
				let url = "http://localhost:8080/animal/get";
				let params = { animalId: gid };
				
				$.get(url, params, res => {
					if (res.code == 200) {
						this.animal = res.data;
					} else {
						layer.msg('获取动物信息失败: ' + res.message, { icon: 2 });
					}
				}, "JSON");
			},
			methods: {
				doUpdate() {
					// 获取修改后的数据
					let url = "http://localhost:8080/animal/update";
					let params = this.animal;
					
					$.post(url, params, res => {
						if (res.code == 200) {
							layer.msg('修改成功', { icon: 1 });
							setTimeout(() => {
								window.location.href = "animal-list.html";
							}, 2000);
						} else {
							layer.msg('修改失败: ' + res.message, { icon: 2 });
						}
					}, "JSON");
				}
			}
		});
	</script>
</body>
</html>